<template>
  <view class="container">
    <view class="header">
      <view class="header-return" @click="returnclick()"></view>
      <view class="header-title">答疑工作室</view>
    </view>
    <view class="body">
      <view class="body-ask">
        <view class="body-ask-button">
          <uni-easyinput
            class="body-ask-button-search"
            prefixIcon="search"
            v-model="search"
            placeholder="搜索"
            @change="searchchange"
          >
          </uni-easyinput>
          <view class="body-ask-button-select">
            <uni-data-select
              v-model="period"
              :localdata="perioddata"
              @change="periodchange"
            ></uni-data-select>
          </view>
          <view class="body-ask-button-select subjectselect">
            <uni-data-select
              v-model="subject"
              :localdata="subjectdata"
              @change="subjectchange"
            ></uni-data-select>
          </view>
          <view class="body-ask-button-refresh" @click="reset"></view>
        </view>
        <view class="body-ask-content" v-if="studioData.length > 0">
          <view
            class="body-ask-piece"
            v-for="item in studioData"
            :key="item.id"
          >
            <!-- <view class="body-ask-piece-icon" v-if="item.picUrl">
							<img class="body-ask-piece-icon" :src="item.picUrl">
						</view>
						<view class="body-ask-piece-icon studioicon" v-else> -->
            <view class="body-ask-piece-icon studioicon"> </view>
            <view class="body-ask-piece-content">
              <view class="body-ask-piece-content-name omit">
                {{ item.studioName }}
              </view>
              <view class="body-ask-piece-content-introduction omit">
                {{ item.introduction }}
              </view>
              <view class="body-ask-piece-content-label">
                <!-- 年级gradeId 学期periodId 学科subjectId -->
                <view class="body-ask-piece-content-label-piece period">
                  {{ item.periodId }}
                </view>
                <view class="body-ask-piece-content-label-piece subject">
                  {{ item.subjectId }}
                </view>
              </view>
            </view>
            <view> </view>
            <view class="body-ask-piece-button">
              <view
                class="body-ask-piece-button-details"
                @click="studiodetails(item)"
              >
                工作室详情
              </view>
              <view class="body-ask-piece-button-ask" @click="startask(item)">
                开始提问
              </view>
            </view>
          </view>
          <view class="" style="height: 5vw"> </view>
        </view>
        <view class="body-ask-content" v-else>
          <view class="nodata-icon"> </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="center">
      <view class="popup">
        <view class="popup-close" @click="closepopup()"></view>
        <view class="popup-title">{{ popup.title }}</view>
        <view class="popup-text">{{ popup.text }}</view>
        <view class="popup-button" @click="popupjump()">{{
          popup.button
        }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getWorkroomOnlineList, getOnlineSubjectAndPeriod } from "@/api/index";
import {
  getOrganizationId,
  setOrganizationId,
  removeOrganizationId,
} from "@/utils/auth2";
import { getsubject, setsubject, removesubject } from "@/utils/auth6";
import { getperiod, setperiod, removeperiod } from "@/utils/auth7";
import { getgrade, setgrade, removegrade } from "@/utils/auth8";
import { getStudio, setStudio, removeStudio } from "@/utils/auth9";
export default {
  data() {
    return {
      name: this.$store.state.user.name,
      version: getApp().globalData.config.appInfo.version,
      search: "",
      period: "",
      subject: "",
      perioddata: getperiod(),
      subjectdata: [],
      studioData: [],
      online: false,
      popup: {
        title: "",
        text: "",
        button: "",
        url: "",
      },
    };
  },
  created() {
    this.Initialize();
  },
  methods: {
    Initialize() {
      this.workroomonlineList();
      this.OnlineSubjectAndPeriod();
    },
    OnlineSubjectAndPeriod() {
      this.online = false;
      // {"isBelongCity":0,"organizationId":1}
      let data = {
        isBelongCity: 0,
      };
      getOnlineSubjectAndPeriod(data).then((res) => {
        if (res.length > 0) {
          this.online = true;
        }
      });
    },
    workroomonlineList() {
      // studioName
      // console.log("this.$store.state.user.baseUrl",this.$store.state.user.baseUrl)
      let organizationId = getOrganizationId();

      let data = {
        periodId: this.period,
        subjectId: this.subject,
        studioName: this.search,
      };
      if (organizationId) {
        data = {
          periodId: this.period,
          subjectId: this.subject,
          studioName: this.search,
          organizationId: organizationId,
        };
      }
      let page = "?pageNum=1&&pageSize=100";
      getWorkroomOnlineList(data, page).then((res) => {
        let data = res.rows;
        for (let i in data) {
          if (data[i].picUrl) {
            data[i].picUrl = this.$store.state.user.baseUrl + data[i].picUrl;
          }
          let data2 = getperiod();
          for (let j in data2) {
            if (data[i].periodId == data2[j].value) {
              data[i].periodId = data2[j].text;
            }
          }

          let data3 = getsubject();
          for (let j in data3) {
            if (data[i].subjectId == data3[j].value) {
              data[i].subjectId = data3[j].text;
            }
          }
        }
        this.studioData = data;
      });
    },
    reset() {
      this.search = "";
      this.period = "";
      this.subject = "";
      this.workroomonlineList();
    },
    searchchange(e) {
      this.search = e;
      this.workroomonlineList();
    },
    periodchange(e) {
      this.period = e;
      this.subject = "";
      // console.log("periodchangee",e)
      let period = getperiod();
      for (let i in period) {
        if (period[i].value == e) {
          this.subjectdata = getperiod()[i].baseSubject;
        }
      }
      this.workroomonlineList();
    },
    subjectchange(e) {
      this.subject = e;
      this.workroomonlineList();
    },
    returnclick() {
      this.$router.push("/pages/index");
    },
    studiodetails(data) {
      this.$store.state.user.isBelongCity = 0;
      this.$store.state.user.studio.id = data.id;
      this.$store.state.user.studio.studioName = data.studioName;
      this.$store.state.user.studio.introduction = data.introduction;
      this.$store.state.user.urlstudio = `/pages/aqc/index`;
      this.$router.push(`/pages/aqc/studio?studioId=${data.id}`);
    },
    startask(item) {
      if (this.online) {
        if (this.$store.state.user.name) {
          let data = {
            id: item.id,
            isBelongCity: item.isBelongCity,
            organizationId: item.organizationId,
          };
          setStudio(data);
          this.$store.state.user.refresh = !this.$store.state.user.refresh;
          this.$store.state.user.urlstartask = "/pages/aqc/index";
          this.$router.push("/pages/aqc/startask");
        } else {
          this.$store.state.user.urllogin = "/pages/aqc/index";
          this.$tab.reLaunch("/pages/login");
        }
      } else {
        this.popup = {
          title: "提示",
          text: "很抱歉，现在未在答疑服务期。答疑时间为每周日上午9：00-11：00。",
          button: "确定",
          url: "",
        };
        this.open();
      }
    },
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("center");
    },
    closepopup() {
      this.$refs.popup.close();
    },
    popupjump() {
      if (this.popup.url) {
        this.$router.push(this.popup.url);
      } else {
        this.$refs.popup.close();
      }
    },
  },
};
</script>

<style>
.container {
  font-size: 4vw;
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  grid-template-rows: 12.5vw auto;
}
.header {
  width: 100%;
  height: 12.5vw;
  background: #ffffff;
  border: 1px solid #f6f7f8;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  /* grid-template-rows: 1fr 1fr; */
}
.header-title {
  font-size: 5vw;
}
.header-return {
  position: absolute;
  width: 5vw;
  height: 5vw;
  left: 5vw;
  top: 3.5vw;
  background: url(../../static/index/return.svg);
  background-size: 100% 100%;
  cursor: pointer;
}
.body {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  grid-template-rows: 1fr;
}
.body-ask {
  width: 100%;
  height: 100%;
}
.body-ask-button {
  padding: 0 5vw;
  width: 100%;
  height: 15vw;
  background: #ffffff;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 1vw;
  grid-template-columns: auto auto auto 15vw;
  /* grid-template-rows: 25vw auto; */
}
.subjectselect /deep/ .uni-stat-box {
}
/deep/ .uni-easyinput {
  padding: 0 0 0 2vw;
}
.body-ask-button-search {
}
.body-ask-button-search /deep/ .is-input-border {
  /* border: none; */
  border-radius: 5vw;
}
.body-ask-button-search /deep/ .uni-easyinput__content .is-input-border {
  /* background: #000000!important; */
}
.body-ask-button-select {
}
.body-ask-button-select /deep/ .uni-select {
  border-radius: 5vw;
}
.body-ask-button-select /deep/ .uni-select__input-box {
  /* position: relative;
		display: grid;
		flex-direction: row;
		align-items: center;
		grid-template-columns: auto auto; */
}
.body-ask-button-select /deep/ .uni-select__input-text {
  /* margin: 0 0 0 4vw; */
}
.body-ask-button-select /deep/ .uni-icons .uniui-top {
  /* margin: 0 0 0 -5vw; */
}
.body-ask-button-select /deep/ .uni-icons {
  /* margin: 0 0 0 -20vw; */
}
.body-ask-button-select /deep/ .uniui-bottom[data-v-a2e81f6e]:before {
  /* content:none;
		width: 5px;
		height: 5px;
		background: url(../../static/index/sj.svg);
		background-size: 100% 100%; */
}
.body-ask-button-refresh {
  width: 80px;
  height: 40px;
  background: url(../../static/hot/reset.svg);
  background-size: 100% 100%;
  border-radius: 5vw;
  cursor: pointer;
}
.body-ask-content {
  width: 100%;
  height: calc(100vh - 27.5vw);
  overflow: auto;
}
.nodata-icon {
  margin: 0 auto 0 auto;
  width: 100vw;
  height: 100vw;
  background: url(../../static/index/nodata.svg);
  /* background: url(../../static/index/nodata.png); */
  background-size: 100% 100%;
}
.nodata-text {
  width: 100%;
  font-size: 5vw;
  display: grid;
  justify-items: center;
  align-items: center;
}
.body-ask-piece {
  margin: 4vw auto 0 auto;
  padding: 1vw;
  width: 95vw;
  height: 35vw;
  background: #ffffff;
  border-radius: 2vw;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 25% 75%;
  grid-template-rows: 75% 25%;
}
.body-ask-piece-icon {
  width: 20vw;
  height: 20vw;
}
.studioicon {
  background: url(../../static/aqc/studio.svg);
  background-size: 100% 100%;
}
.body-ask-piece-content {
  width: 90%;
  height: 90%;
  display: grid;
  justify-items: start;
  align-items: start;
  grid-template-rows: 35% 30% 30%;
}
.body-ask-piece-content-name {
  width: 60vw;
  font-size: 5vw;
  color: #363a44;
}
.body-ask-piece-content-introduction {
  width: 60vw;
  color: #686b73;
}
.body-ask-piece-content-label {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 2vw;
  grid-template-columns: auto auto 1fr;
}
.body-ask-piece-content-label-piece {
  padding: 0 2vw;
  width: auto;
  height: 6vw;
  display: inline-block;
  font-size: 3.5vw;
  line-height: 6vw;
}
.period {
  color: #1492ff;
  background: #ecf5ff;
}
.subject {
  color: #00b578;
  background: #ebf9f4;
}
.body-ask-piece-button {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: end;
  align-items: center;
  grid-template-columns: 60% 35%;
}
.body-ask-piece-button-details {
  padding: 0 2.5vw 0 2.5vw;
  width: auto;
  height: 8vw;
  border-radius: 4vw;
  display: grid;
  justify-items: center;
  align-items: center;
  border: 1px solid #e8e9ec;
  cursor: pointer;
}
.body-ask-piece-button-ask {
  padding: 0 2.5vw 0 2.5vw;
  width: auto;
  height: 8vw;
  border-radius: 4vw;
  display: grid;
  justify-items: center;
  align-items: center;
  color: #ffffff;
  background: #1492ff;
  cursor: pointer;
}
.omit {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.subjectselect /deep/ .uni-select__selector {
  width: 120px;
}

.popup {
  width: 60vw;
  height: 40vw;
  background: #ffffff;
  position: absolute;
  margin-left: -30vw;
  margin-top: -20vw;
  border-radius: 2.2vw;

  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: 5vw 5vw 15vw 15vw;
}
.popup-close {
  margin: 2vw 0 0 55vw;
  width: 3vw;
  height: 3vw;
  background: url(../../static/index/close.svg);
  background-size: 100% 100%;
  cursor: pointer;
}
.popup-title {
  display: grid;
  justify-content: center;
  align-items: center;
  font-weight: 550;
  font-size: 4vw;
}
.popup-text {
  margin: 0 5vw 0 05vw;
  width: 50vw;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 3.4vw;
}
.popup-button {
  margin: 0 5vw 0 5vw;
  width: 50vw;
  height: 8vw;
  border-radius: 4vw;
  display: grid;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: #1492ff;
  cursor: pointer;
}
</style>
